<template>
    <div>
        <!-- <el-switch inline-prompt v-model="isDark" active-text="开启" inactive-text="关闭" @change="handleSwitchChange" /> -->
        <el-switch inline-prompt v-model="isDark" active-icon="Sunny" inactive-icon="Moon" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useDark } from "@vueuse/core";

export default defineComponent({
    name: "SwitchExample",
    setup() {
        // 使用 ref 创建一个响应式的布尔值
        const isDark = useDark();

        // 处理 switch 变化的事件
        const handleSwitchChange = (value: boolean) => {
            // console.log("Switch 状态变化:", value);
        };

        return {
            isDark,
            handleSwitchChange,
        };
    },

    // template: ``,
});
</script>

<style scoped>
/* 你可以在这里添加一些样式 */
</style>
